<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
</head>

<body>
    <template id="list">
        <div>
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">添加</h3>
                </div>
                <div class="panel-body form-inline">
                    <label for="">id：<input type="text" class="form-control" v-model="id"></label>
                    <label for="">name：<input type="text" class="form-control" v-model="name" @keyup.f2="add"></label>
                    <label for=""><input type="button" value="添加" class="btn btn-primary" @click="add"></label>
                    <label for="">搜索：<input type="text" class="form-control" v-model:value="key" v-focus></label>
                </div>
            </div>

            <table class="table table-bordered table-hover table-striped">
                <thead>
                    <tr>
                        <th>Id</th>
                        <th>Name</th>
                        <th>Ctime</th>
                        <th>Operation</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- 之前， v-for 中的数据，都是直接从 data 上的list中直接渲染过来的 -->
                    <!-- 现在， 我们自定义了一个 search 方法，同时，把 所有的关键字，通过传参的形式，传递给了 search 方法 -->
                    <!-- 在 search 方法内部，通过 执行 for 循环， 把所有符合 搜索关键字的数据，保存到 一个新数组中，返回 -->
                    <tr v-for="item in search(key)" :key="item.id">
                        <td>{{ item.id }}</td>
                        <td v-text="item.name"></td>
                        <td>{{ item.ctime}}</td>
                        <td>
                            <button type="button" class="btn btn-danger" @click.prevent="del(item.id)">删除</button>
                            <!-- <a href="" @click.prevent="del(item.id)">删除</a> -->
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </template>
    <div id="app">
        <list></list>
    </div>

    <script>
        Vue.directive("focus", {
            inserted(el) {
                el.focus()
            }
        })
        Vue.component("list", {
            template: "#list",
            data: function () {
                return {
                    brands: [{
                        id: 1,
                        name: "宝马",
                        ctime: new Date(),
                    }, {
                        id: 2,
                        name: "奔驰",
                        ctime: new Date(),
                    }],
                    name: "",
                    id: "",
                    key: "",
                }
            },
            methods: {

                add() {
                    if (this.id in this.brands) {
                        alert("ID已存在")
                        return
                    }
                    if (this.id == "" || this.name == "") {
                        alert("请输入正确的信息")
                        return
                    }
                    this.brands.push({
                        id: this.id,
                        name: this.name,
                        ctime: new Date(),
                    })
                    this.id = this.name = ""
                },
                del(id) {
                    console.log(id)
                    this.brands.some((item, i) => {
                        if (item.id == id) {
                            this.brands.splice(i, 1)
                            return true
                        }
                    })

                },
                search(key) {
                    var newList = []
                    newList = this.brands.filter(item => {
                        if (item.name.includes(key)) {
                            return item
                        }
                    })
                    return newList
                }
            }

        })
        var vm = new Vue({
            el: '#app',
            data: {

            },
            methods: {

            },
        })
    </script>
</body>

</html>